<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html data-theme="dark">
<c:set var="pageTitle" value="管理后台" scope="page"/>
<%@include file="/include/head_libs.jsp" %>

<body class="flex">
<!-- 左侧侧边栏 -->
<div class="h-screen w-48 bg-gray-800">
    <aside class="border-r h-full bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-white flex-shrink-0 lg:block transition-transform transform lg:translate-x-0">
        <div class="p-2 border-y dark:border-gray-700 dark:bg-gray-800 select-none">
            <img src="<c:url value="/assets/img/logo.jpg"/>" class="h-12 w-full" alt="Logo"/>
        </div>
        <nav class="mt-4 space-y-1">
            <a href="javascript:void(0)" class="side-item side-item-active" data-page="defaultPanel">仪表盘</a>
            <a href="javascript:void(0)" class="side-item" data-page="userManager">用户管理</a>
            <a href="javascript:void(0)" class="side-item" data-page="movieManager">影片管理</a>
            <a href="javascript:void(0)" class="side-item" data-page="carouselManager">轮播图管理</a>
            <a href="javascript:void(0)" class="side-item" data-page="taskManager">任务管理</a>
            <a href="javascript:void(0)" class="side-item" data-page="settingManager">设置</a>
        </nav>
    </aside>
</div>
<!-- 右侧内容 -->
<div class="flex-grow flex-col flex">
    <!-- 顶部导航栏 -->
    <header class="h-16 px-4 w-full flex justify-end items-center border-y dark:border-gray-700">
        <div class="flex-none neutral-content mr-4 border rounded-full">
            <div class="dropdown dropdown-end flex justify-between">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                    <div class="w-10 rounded-full">
                        <c:if test="${empty sessionScope.userAvatarUrl}">
                            <img alt="User Avatar" src="${sessionScope.ctx}/assets/img/svg/visited-person.svg"/>
                        </c:if>
                        <c:if test="${not empty sessionScope.userAvatarUrl}">
                            <img alt="User Avatar" src="${sessionScope.userAvatarUrl}"/>
                        </c:if>
                    </div>
                </div>
                <div tabindex="0" role="button" class="flex mr-2 justify-center items-center">
                    <span class="select-none">管理员</span>
                </div>
                <ul tabindex="0" class="person-dropdown">
                    <li><a href="${sessionScope.ctx}/api/auth?action=logout">安全退出</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 中间内容区域 -->
    <div class="flex-grow overflow-auto bg-white dark:bg-gray-800 dark:text-white p-6">
        <iframe src="/panel/defaultPanel" class="w-full h-full rounded-2xl"></iframe>
    </div>

    <!-- 底部固定区域 -->
    <footer class="upper-layout h-16 justify-center border-t dark:border-gray-700 p-4 text-center">
        &copy; 2025 后台管理系统
    </footer>
</div>
<jsp:include page="/include/hover_theme_controller.jsp"/>

<script>
    $(document).ready(function () {
        $('.side-item').on('click', function () {
            let page = $(this).data('page');
            $(this).siblings('a').removeClass('side-item-active');
            $(this).addClass('side-item-active');
            let iframe = $('iframe');
            iframe.attr('src', '/panel/' + page);
        });
    });
</script>
</body>
</html>
